<template>
  <div>
    <!--面包屑-->
    <my-breadcrumb :items="['商品管理', '商品添加']"></my-breadcrumb>

    <!--步骤条-->
    <div class="step">
      <h3>新增一个商品</h3>
      <Steps :current="current">
        <Step title="商品信息" content="填写商品基本信息"></Step>
        <Step title="添加sku" content="SKU是指实际购买的商品，至少有一个SKU"></Step>
        <Step title="商品详情" content="编辑商品详情，介绍商品"></Step>
        <Step title="信息确认" content="最终确认信息是否有误"></Step>
      </Steps>
    </div>

    <!--填写内容区域-->
    <div style="margin-left: 60px;margin-top: 20px;">
      <!--1、spu信息填写-->
      <spu-step @getSpuData="getSpuData" v-show="current === 0" ref="spu"></spu-step>

      <!--2、sku信息填写-->
      <sku-step @nextStep="getSkuData" @goBack="goBack" v-show="current === 1" ref="sku"></sku-step>

      <!--3、商品详情编辑-->
      <detail-step @nextStep="getRichText" @goBack="goBack" v-show="current === 2" ref="detail"></detail-step>

      <!--4、最后一步，确认商品信息无误添加-->
      <goods-sure @submit="addToServer" @goToBack="goToBack" v-show="current === 3" ref="sure"></goods-sure>
    </div>

  </div>
</template>

<script>
import spuStep from './spuStep'
import skuStep from './skuStep'
import detailStep from './detailStep'
import goodsSure from './goodsSure'
export default {
  name: 'goods-add',
  components: {
    spuStep,
    skuStep,
    detailStep,
    goodsSure
  },
  data () {
    return {
      // 记录步骤条步数
      current: 0,

      // 商品全部信息
      spuData: {},
      spuImages: [],
      spuBlobs: [],

      skuData: null,
      skuImages: [],
      skuBlobs: [],

      richText: '',

      // 基本信息
      classify: '',
      units: '',
      labels: ''
    }
  },
  methods: {
    getSpuData (data) {
      /*
      * spuStep组件通知本组件（父组件）基本信息已填写好
      * */
      this.classify = data.data.classify
      this.units = data.data.units
      this.labels = data.data.labels
      for (let i in data.spuData) {
        this.spuData[i] = data.spuData[i]
      }
      this.spuImages = data.images
      this.spuBlobs = data.blobs
      this.current++
      document.getElementById('content').scrollTop = 0
    },

    getSkuData (data) {
      /*
      * skuStep组件通知本组件（父组件）sku已添加完成
      * data为JSON字符串
      * 进入下一步
      * */
      this.skuData = JSON.parse(data.list)
      this.skuImages = data.images
      this.skuBlobs = data.blobs
      this.current++
      document.getElementById('content').scrollTop = 0
    },

    getRichText (html) {
      /*
      * 获取编辑的商品详情文本
      * 进入下一步
      * */
      this.richText = html
      this.$refs.sure.setAllData({
        spuData: this.spuData,
        spuImages: this.spuImages,
        skuData: this.skuData,
        skuImages: this.skuImages,
        richText: this.richText
      }, {
        classify: this.classify,
        units: this.units,
        labels: this.labels
      })
      this.current++
      document.getElementById('content').scrollTop = 0
    },

    goBack () {
      /*
      * 返回上一步
      * */
      this.current--
      document.getElementById('content').scrollTop = 0
    },
    goToBack (step) {
      this.current = step
    },

    addToServer (next) {
      /*
      * 最终提交，发送请求
      * next继续添加或不继续添加
      * */
      let formData = new FormData()
      this.spuBlobs.forEach((item, index) => {
        formData.append('mainImages', item, index + '.jpg')
      })
      this.skuBlobs.forEach((item, index) => {
        formData.append('skuImages', item, index + '.jpg')
      })
      this.skuData.forEach((item, index) => {
        item.imageId = index
      })
      let goodsMain = {
        title: '',
        remark: '',
        isNew: '0',
        isRecommend: '0',
        isClear: '0',
        sortWeight: 0
      }
      for (let i in goodsMain) {
        goodsMain[i] = this.spuData[i]
      }
      let provideGoodsInfo = {
        goodsMain,
        detailContent: this.richText,
        goodsCategoryIds: this.spuData.selectClassify,
        unitId: this.spuData.goodsUnit,
        goodsSkus: this.skuData,
        labelIds: this.spuData.goodsLabel
      }
      formData.append('provideGoodsInfoDto', JSON.stringify(provideGoodsInfo))
      this.$ajax.post('/goods/manage/add/goods', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((res) => {
        if (res.data.success) {
          if (next) {
            this.$refs.spu.clearData()
            this.$refs.sku.clearSkuData()
            this.$refs.detail.clearRichText()
            this.current = 0
            document.getElementById('content').scrollTop = 0
            this.$Message.success('添加成功，请继续添加商品')
          } else {
            this.$router.push({path: '/goods/manage/modify/goods/info/audit/page'})
            this.$Message.success('添加成功')
          }
        }
      })
    }
  },
  created () {
  }
}
</script>

<style scoped>
  .step{
    margin: 16px 60px 0;
    border-bottom: 1px solid #dddee1;
    padding-bottom: 24px;
  }
  .step h3{
    margin-bottom: 16px;
  }
</style>
